import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import { useSelector , useDispatch} from 'react-redux'
import Header from '@/components/header/header'
import Footer from '@/components/footer/footer'
import AlertTip from '@/components/alert_tip/alert_tip'
import { is, fromJS } from 'immutable';  // 保证数据的不可变
import QueueAnim from 'rc-queue-anim'
import { saveUserInfo,changeHasAlert } from '@/store/action'
import { getStore } from '@/utils/commons'
import { getImgPath } from '../../utils/commons'
import API from '../../api/api'
import './profile.scss'

Profile.propTypes = {
  saveUserInfo: PropTypes.func.isRequired,
}

const imgpath = ''
export default function Profile(props){

  const counter = useSelector(state => state.userInfo)
  const dispatch = useDispatch()
  let [alertText,setAlertText] = useState('请在手机APP中打开')
  let [hasAlert,setHasAlert] = useState('')
  
  function initData(){
    if (!counter){
      counter.registe_time = '暂无手机绑定'
      counter.username = '登录/注册'
    }
  }
  
  function handleClick(type){
    switch (type) {
      case 'download':
        alertText = '请到官方网站下载'
        setHasAlert(true)
        break
      case 'unfinished':
        alertText = '功能尚未开发'
        setHasAlert(true)
        break
      case 'close':
        alertText = '功能尚未开发'
        setHasAlert(false)
        break
    }
    setAlertText(alertText)
  }

  // 获取用户信息
  async function getUserInfo() {
    let userInfo = await API.getUser({ user_id: getStore('user_id') })
    userInfo.imgpath = userInfo.avatar.indexOf('/') !== -1 ? '/img/' + userInfo.avatar : getImgPath()
    dispatch(saveUserInfo(userInfo))
    initData()
  }
  function goBack() {
    props.history.goBack()
  }
  useEffect(()=>{
    if (!counter.user_id) {
      getUserInfo()
    } else {
      initData()
    }
  },[counter.user_id])
  
  return (
    <div className='profile-container'>
      <QueueAnim type='bottom'>
        <Header title="我的" goBack={goBack} key='s1' />
        <section key='s2'>
          <section className='profile-number' >
            <Link to={counter && counter.user_id ? '/info' : '/login'} className='profile-link'>
              <img src={imgpath} alt='img is wrong' className='private-image' />
              <div className='user-info'>
                <div>{counter.username}</div>
                <div>
                  <div className='icon-tel'></div>
                  <span className='icon-mobile-number'>{counter.registe_time}</span>
                </div>
              </div>
              <div className='icon-arrow-right'>
              </div>
            </Link>
          </section>
          <section className='info-data' key='i1'>
            <ul className='clear'>
              <Link to='/balance' className='info-data-link'>
                <span className='info-data-top'><b>{parseInt(counter.balance).toFixed(2)}</b>元</span>
                <span className='info-data-bottom'>我的{counter.hasAlert}余额</span>
              </Link>
              <Link to='/balance' className='info-data-link'>
                <span className='info-data-top'><b>{counter.count || 0}</b>个</span>
                <span className='info-data-bottom'>我的优惠</span>
              </Link>
              <Link to='/balance' className='info-data-link'>
                <span className='info-data-top'><b>{counter.pointNumber || 0}</b>分</span>
                <span className='info-data-bottom'>我的积分</span>
              </Link>
            </ul>
          </section>
          <section className='profile-list'>
            <QueueAnim deley='0.4'>
              <div onClick={handleClick.bind(this, 'unfinished')} className='myorder' key='i2'>
                <div className='icon-dingdan order-icon'></div>
                <div className='myorder-text'>
                  <span>我的订单</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </div>
              <a href="https://home.m.duiba.com.cn/#/chome/index" className='myorder' key='i3'>
                <div className='icon-jifen1 order-icon'></div>
                <div className='myorder-text'>
                  <span>积分商城</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </a>
              <div onClick={handleClick.bind(this, 'unfinished')} className='myorder' key='i4' >
                <div className='icon-huangguan order-icon'></div>
                <div className='myorder-text'>
                  <span>饿了么会员卡</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </div>
              <div onClick={handleClick.bind(this, 'unfinished')} className='myorder' key='i5'>
                <div className='icon-yk_fangkuai_fill order-icon'></div>
                <div className='myorder-text'>
                  <span>服务中心</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </div>
              <div onClick={handleClick.bind(this, 'download')} className='myorder' key='i6'>
                <div className='icon-changyonglogo40 order-icon'></div>
                <div className='myorder-text'>
                  <span>下载饿了么APP</span>
                  <div className='icon-arrow-right'></div>
                </div>
              </div>
            </QueueAnim>
          </section>
        </section>
        <Footer key='s3' />
      </QueueAnim>
      {hasAlert && <AlertTip logout={() => { return false }} closeTip={handleClick} alertText={alertText} />}
    </div>
  )
}